<template>
    <view>
        <view class="mask" v-show="show" @click="close()"></view>
        <view :class="{details:true, show:show}">
            <view class="goods">
                <view class="image">
                    <image :src="goodsDetails.image"></image>
                </view>
                <view class="text">{{goodsDetails.title}}</view>
            </view>
            <view class="goods-info">
                <view class="price-amount">
                    <view class="price">价格：￥{{goodsDetails.price}}</view>
                    <view class="handle-amount">
                        <view class="dec" @click="decAmount()" v-show="amount>0"></view>
                        <input type="number" :value="amount" v-show="amount>0" @blur="setAmount" />
                        <view class="inc" @click="incAmount()"></view>
                    </view>
                </view>
                <scroll-view scroll-y="true" class="content"><rich-text :nodes="goodsDetails.content|htmlToArray"></rich-text></scroll-view>
            </view>
        </view>
    </view>
</template>

<script>
    import {mapActions,mapState} from "vuex";
    export default {
        name: "goods-details",
        props:{
            show:{
                type:Boolean,
                default:false
            },
            //分店的id
            branchShopId:{
                type:String,
                default:""
            },
            //菜品的id
            gid:{
                type:String,
                default:""
            },
            //菜品数量
            amount:{
                type:Number,
                default:0
            }
        },
        methods:{
            ...mapActions({
                getGoodsDetails:"goods/getGoodsDetails"
            }),
            //关闭菜品详情组件
            close(){
                this.$emit("close")
            },
            //增加数量
            incAmount(){
                this.$emit("incAmount",this.gid,"","")
            },
            //减少数量
            decAmount(){
                this.$emit("decAmount",this.gid,"","")
            },
            //修改数量
            setAmount(e){
                this.$emit("setAmount",e,this.gid,"","")
            }
        },
        watch:{
            gid(val){
                this.getGoodsDetails({branch_shop_id:this.branchShopId,gid:val})
            }
        },
        computed:{
            ...mapState({
                goodsDetails:state=>state.goods.goodsDetails
            })
        },
    }
</script>

<style scoped>
    .mask{width:100%;height:100%;position: fixed;z-index:88;bottom:0px;left:0px;background-color:rgba(0,0,0,0.6)}
    .details{width:100%;height:795rpx;background-color:#FFFFFF;position:fixed;bottom:0px;left:0px;z-index:89;transform: translateY(100%);transition:all 0.3s;}
    .details .goods{width:100%;height:330rpx;border-bottom:1px solid #EFEFEF}
    .details .image{width:260rpx;height:260rpx;margin:0 auto;margin-top:20rpx;}
    .details .image image{width:100%;height:100%;border-radius: 6px;}
    .details .goods .text{width:auto;height:auto;margin:0 auto;margin-top:20rpx;white-space: nowrap;font-size:28rpx;color:#333333;text-align:center;font-weight: bold;}

    .details .goods-info{width:85%;margin:0 auto;font-size:28rpx;color:#333333;font-weight: bold;}
    .details .goods-info .price-amount{width:100%;display:flex;justify-content: space-between;margin-top:20rpx;}
    .details .goods-info .handle-amount{width:auto;height:60rpx;display:flex;align-items: center;justify-content:flex-end}
    .details .goods-info .handle-amount .dec{width:55rpx;height:55rpx;background-image:url("~@/static/images/main/dec.png");background-size:100%;background-position: center;background-repeat: no-repeat;}
    .details .goods-info .handle-amount .inc{width:55rpx;height:55rpx;background-image:url("~@/static/images/main/inc.png");background-size:100%;background-position: center;background-repeat: no-repeat;}
    .details .goods-info .handle-amount input{width:50rpx;height:100%;text-align: center;margin-right:10rpx;margin-left:10rpx;}
    .details .goods-info .handle-amount .text{font-size:28rpx;color:#333333;margin-right:10rpx;margin-left:10rpx;width:50rpx;text-align:center;}
    .details .goods-info .content{width:100%;height:200rpx;margin-top:20rpx;overflow:hidden;}
    .details.show{transform: translateY(0%)}
</style>
